<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>工作台</title>
        <link
            rel="stylesheet"
            href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        />
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
        <link rel="stylesheet" href="../css/wwl/icon/iconfont.css" />
        <link rel="stylesheet" href="../css/wwl/index.css" />

        <!-- 薪资数据 -->
        <script src="../../OA项目/js/薪资/薪资数据.js"></script>
        <script src="../../OA项目/js/薪资/核算薪资数据.js"></script>
        <script src="../../OA项目/js/薪资/工资条数据.js"></script>
    </head>

    <body>
        <nav class="nav-ct">
            <div class="nav-hd">
                <span class="iconfont icon-oabangong"></span>
                <span class="title">办公后台系统</span>
            </div>
            <div class="center">
                <ul class="nav-content">
                    <li><a href="../code/index.html">工作台</a></li>
                    <li><a href="#">数据大屏</a></li>
                    <li><a href="../code/yjx/员工花名册.html">员工</a></li>
                    <li><a href="../code/组织管理.html">组织</a></li>
                    <li><a href="#">招聘</a></li>
                    <li><a href="#">考勤</a></li>
                    <li><a href="../code/薪资/薪资.html">薪酬</a></li>
                    <li>
                        <a href="../code/社保公积金/参保方案.html"
                            >社保公积金</a
                        >
                    </li>
                    <li>
                        <a href="../code/performance-management.html">绩效</a>
                    </li>
                    <li><a href="../code/training-index.html">培训</a></li>
                    <li><a href="../code/审核.html">审批</a></li>
                    <li><a href="../code/权限-用户.html">权限设置</a></li>
                </ul>
            </div>
        </nav>
        <div class="ct-box">
            <div class="box-header"><span class="box-title">工作台</span></div>
            <div class="box-hello">
                <span class="box-hello-text">
                    今天是<span id="timer">2022年6月15日</span
                    >，欢迎继续使用办公系统～</span
                >
            </div>
            <div class="employee-profile">
                <div class="employee-title">员工概况</div>
                <div class="profile-box">
                    <div>
                        <span class="profile-tl">在职</span>
                        <span class="profile-ct">12,040</span>
                    </div>
                    <div>
                        <span class="profile-tl">待入职</span>
                        <span class="profile-ct">50</span>
                    </div>
                    <div>
                        <span class="profile-tl">试用期</span>
                        <span class="profile-ct">110</span>
                    </div>
                    <div>
                        <span class="profile-tl">正式</span>
                        <span class="profile-ct">11,000</span>
                    </div>
                    <div>
                        <span class="profile-tl">待离职</span>
                        <span class="profile-ct">10</span>
                    </div>
                    <div>
                        <span class="profile-tl">已离职</span>
                        <span class="profile-ct">120</span>
                    </div>
                </div>
            </div>
            <div class="module-area">
                <div class="mod-area1">
                    <div class="attendance">
                        <span class="attendance-title">日程安排</span>
                        <div class="attendance-stats-tb">
                            <span>95%</span>
                            <img src=".././img/wwl/u40.png" />
                        </div>
                        <div class="attendance-stats">
                            <span class="attendance-stats-ct"
                                >日同比<span>0.8%</span></span
                            >
                            <span
                                class="glyphicon glyphicon-triangle-top"
                                aria-hidden="true"
                            ></span>
                        </div>
                    </div>
                    <div class="attendance-num">
                        <span class="attendance-num-title">今日考勤</span>
                        <div class="check-status">
                            <div class="check-status-ct">
                                <span class="check-status-tl">正常打卡</span>
                                <div>
                                    <span class="check-status-num">1240</span>
                                    <span>人</span>
                                </div>
                            </div>
                            <div class="check-status-ct">
                                <span class="check-status-tl">异常打卡</span>
                                <div>
                                    <span class="check-status-num">120</span>
                                    <span>人</span>
                                </div>
                            </div>
                        </div>
                        <div class="check-status2">
                            <div><span>迟到：</span> <span>5人</span></div>
                            <div><span>早退：</span> <span>1人</span></div>
                            <div><span>漏打卡：</span> <span>6人</span></div>
                        </div>
                    </div>
                </div>
                <div class="mod-area2">
                    <div class="calendar">
                        <span class="calendar-title">今日考勤</span>
                        <div class="date-num">
                            <span class="exergue">2022年9月</span>
                            <span class="today">&lt; 今天 &gt;</span>
                        </div>
                        <div class="img-box">
                            <img src="../img/wwl/日程表.png" width="500px" />
                        </div>
                    </div>
                    <div class="approval">
                        <span class="approval-title">审批情况</span>
                        <div class="approval-status">
                            <div>
                                <span class="approval-status-tl">迟到：</span>
                                <span>1204</span>
                            </div>
                            <div>
                                <span class="approval-status-tl">早退：</span>
                                <span>12</span>
                            </div>
                            <div>
                                <span class="approval-status-tl">漏打卡：</span>
                                <span>12</span>
                            </div>
                        </div>
                        <div class="chart">
                            <div
                                id="main"
                                style="width: 500px; height: 400px"
                            ></div>
                        </div>
                        <script>
                            var chartDom = document.getElementById("main");
                            var myChart = echarts.init(chartDom);
                            var option;

                            option = {
                                xAxis: {
                                    type: "category",
                                    data: [
                                        "入职",
                                        "转正",
                                        "离职",
                                        "请假",
                                        "调岗",
                                        "加班",
                                        "定薪",
                                        "外出",
                                    ],
                                },
                                yAxis: {
                                    type: "value",
                                },
                                series: [
                                    {
                                        data: [
                                            88, 488, 89, 120, 40, 420, 41, 5,
                                        ],
                                        label: {
                                            show: true,
                                            fontWeight: "bold",
                                            fontSize: 20,
                                            color: "rgba(102, 102, 102, 1)",
                                            position: "top",
                                        },
                                        itemStyle: {
                                            color: "rgba(51, 102, 255, 1)",
                                        },
                                        type: "bar",
                                    },
                                ],
                            };

                            option && myChart.setOption(option);
                        </script>
                    </div>
                </div>
            </div>
        </div>
        <!-- 建议添加一个页脚 -->
    </body>
</html>
